<template>
  <div class="cover-items">
    <div class="item-box" v-for="(item, index) in items" :key="index">
      <div class="item-box-title">{{item.name}}</div>
      <dv-charts class="item-box-charts" :option="item.option" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CoverItems',
  data () {
    return {
      items: [
        {
          name: '无感授信覆盖率',
          option: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 14
                  }
                }
              }
            ]
          }
        },
        {
          name: '授信覆盖率',
          option: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 90, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 14
                  }
                }
              }
            ]
          }
        },
        {
          name: '用信覆盖率',
          option: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 88, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 14
                  }
                }
              }
            ]
          }
        }
      ]
    }
  }
}
</script>
<style lang="less">
  .cover-items {
    padding-top: 40px;
    display: flex;
    justify-content: space-around;
    .item-box-title {
      height: 42px;
      text-align: center;
      padding: 0 12px;
    }
    .item-box-charts {
      width: 100px;
      height: 100px;
    }
  }
</style>
